import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Input, Button, Message, Icon } from '@alifd/theme-ds-jxc';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import api from '../../utils/api';
import Axios from 'axios';
import qs from 'qs';

@withRouter
class UserLogin extends Component {
  static displayName = '用户登录';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      value: {
        uname: '',
        password: '',
      },
    };
  }
  formChange = (value) => {
    this.setState({
      value,
    });
  };
  // 清除登陆密码
  clearSess=() => {
    this.setState(
      {
        value: {
          ...this.state.value,
          password: '',
        },
      }
    );
  }
  componentDidMount() {
    this.clearSess();
  }
  handleSubmit = (e) => {
    // e.preventDefault();
    this.refs.form.validateAll((errors, values) => {
      if (errors) {
        return;
      }
      Axios({
        url: `${api.Login}`,
        method: 'post',
        data: qs.stringify(values),
      })
        .then(
          (res) => {

            if (res.data.code === 200) {
              Message.success('登录成功!');
              sessionStorage.setItem('token', res.data.token);
              sessionStorage.setItem('uname', res.data.userinfo.uname);
              sessionStorage.setItem('w_id', res.data.userinfo.w_id);
              sessionStorage.setItem('w_name', res.data.userinfo.w_name);
              sessionStorage.setItem('w_type', res.data.userinfo.w_type);
              sessionStorage.setItem('grade', res.data.userinfo.grade);
              sessionStorage.setItem('id', res.data.userinfo.id);
              this.setState(
                {
                  value: {
                    uname: '',
                    password: '',
                  },
                }, () => {
                  this.props.history.push('/');
                }
              );
            } else {
              Message.error(res.data.msg);
            }
          },
          (error) => {
            Message.error(error);
          }
        );
    });
  };
  //  回车提交
  onKeyUp=(e) => {
    if (e.keyCode === 13) {
      this.handleSubmit();
    }
  }
  render() {
    return (
      <div>
        {/* <div style={styles.mask} /> */}
        <div style={styles.container}>
          <h4 style={styles.title}>登 录</h4>
          <IceFormBinderWrapper
            value={this.state.value}
            onChange={this.formChange}
            ref="form"
          >
            <div style={styles.formItems}>
              <div style={styles.formItem}>
                <Icon type="account" size="medium" style={styles.inputIcon} />
                <IceFormBinder name="uname" required message="必填">
                  <Input
                    size="large"
                    maxLength={20}
                    placeholder="用户名"
                    style={styles.inputCol}
                  />
                </IceFormBinder>
                <IceFormError name="uname" />
              </div>

              <div style={styles.formItem}>
                <Icon type="mima" size="medium" style={styles.inputIcon} />
                <IceFormBinder name="password" required message="必填">
                  <Input
                    size="large"
                    htmlType="password"
                    placeholder="密码"
                    style={styles.inputCol}
                    onKeyUp={this.onKeyUp}
                  />
                </IceFormBinder>
                <IceFormError name="password" />
              </div>
              <div style={styles.footer}>
                <Button
                  type="primary"
                  size="large"
                  onClick={this.handleSubmit}
                  style={styles.submitBtn}
                >
                  登 录
                </Button>
              </div>
            </div>
          </IceFormBinderWrapper>
        </div>
      </div>
    );
  }
}

const styles = {
  container: {
    width: '800px',
    height: '400px',
    padding: '80px 200px',
    background: '#fff',
    borderRadius: '6px',
    zIndex: '1000',
  },
  bigtitle: {
    margin: '0 0 20px',
    color: '#fff',
    fontSize: '24px',
    fontWeight: '500',
    textAlign: 'center',
  },
  title: {
    margin: '0 0 40px',
    color: '#FF6E02',
    fontSize: '24px',
    fontWeight: '500',
    textAlign: 'center',
  },
  formItem: {
    position: 'relative',
    marginBottom: '20px',
  },
  inputIcon: {
    position: 'absolute',
    right: '10px',
    top: '8px',
    color: '#ccc',
  },
  inputCol: {
    width: '100%',
    paddingLeft: '20px',
    border: 'none',
    borderBottom: '1px solid #DCDEE3',
    borderRadius: '0',
  },
  submitBtn: {
    backgroundImage: 'linear-gradient(90deg, #FFA10D 0%, #FF6E02 100%)',
    boxShadow: '0 2px 6px 0 rgba(230,24,24,0.30)',
    borderRadius: '30px',
  },
  footer: {
    marginTop: '40px',
    display: 'block',
    textAlign: 'center',
  },
};

export default UserLogin;
